<template>
	<view class="login">
		<view class="log">
			<view class="tx">请输入注册信息</view>
			<view class="user">
				<u-form :model="user" :rules="rules" ref="uForm">
					<u-form-item prop="account">
						<u--input v-model="user.account" placeholder="请输入用户名"></u--input>
					</u-form-item>
					<u-form-item prop="phone">
						<u--input v-model="user.phone" maxlength="11" placeholder="请输入手机号"></u--input>
					</u-form-item>
					<u-form-item prop="pwd1">
						<u--input v-model="user.pwd1" :password="true" placeholder="请输入密码"></u--input>
					</u-form-item>
					<u-form-item prop="pwd2">
						<u--input v-model="user.pwd2" :password="true" placeholder="请确认密码"></u--input>
					</u-form-item>
				</u-form>
			</view>
			<view class="btn">
				<u-button @click="enroll()" type="error" shape="circle">注册</u-button>
			</view>
			<view class="zc">
				已有帐号，<text @click="goLogin()">前往登录</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions,mapState } from 'vuex'
	export default {
		data() {
			
			return {
				user : {
					account : '',
					phone : '',
					pwd1 : '',
					pwd2 : ''
				},
				rules: {
					account: {
							type: 'string',
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
					},
					pwd1: {
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
					},
					pwd2: {
							type: 'string',
							required: true,
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								if(this.user.pwd2==''){
									callback(new Error('请填写密码'))
								}else if(value!=this.user.pwd1){
									callback(new Error('密码不一致'))
								}else{
									callback()
								}
							},
							trigger: ['blur', 'change'],
					},
					phone: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		methods: {
			...mapActions('login',['actionEnrollList','actionLogin']),
			enroll(){
				if(this.user.account!='' && this.user.phone!='' && this.user.pwd1!='' && this.user.pwd2!=''){
					if(this.user.pwd1 == this.user.pwd2){
						// 存储用户注册信息
						let k ={
							account : this.user.account,
							pwd : this.user.pwd1,
							phone : this.user.phone
						}
						this.actionEnrollList(k);
						setTimeout(()=>{
							uni.showToast({
								title:'注册成功'
							})
						},100)
						uni.navigateTo({
							url:'/pages/login/login'
						})
						this.user = {};
					}else{
						uni.showToast({
							icon:'none',
							title:'两次密码不一致请重新输入'
						})
					}
				}
			},
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style>
.login{
	width: 100%;
}
.log{
	width: 90%;
	margin: 0 auto;
}
.log .tx{
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	font: 900 18px '';
}
.log .user{
	width: 100%;
	padding-bottom: 20px;
}
.log .user .li{
	width: 100%;
	margin-top: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.log .zc{
	margin-top: 20px;
	font-size: 14px;
	text-align: center;
}
.log .zc text{
	font-size: 16px;
	color: #f56c6c;
}
</style>
